<template>
  <div class="caseList">
    <el-button type="primary" @click="dialogVisibleLondy = true" class="add" >+ 添加案例</el-button>
    <el-table border
      :data="caseList"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        prop="create_time"
        label="案例添加日期"
        min-width="200">
        <template slot-scope="scope">
          <p v-html="scope.row.create_time"></p>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="案例名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        label="封面图"
        prop="list_img"
        min-width="360">
        <template slot-scope="scope">
          <img :src=" BASE_API+ scope.row.list_img" />
          <!-- <img src="scope.row.article_img"> -->
        </template>
      </el-table-column>
      <el-table-column
      label="操作"
      min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="openProInfo(scope.$index)" >查看</el-button>
          <el-button type="text" @click="delProduct(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看/编辑产品 -->
    <el-dialog title="查看/编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="案例名" :label-width="formLabelWidth">
          <el-input  v-model="form.title2" auto-complete="off" @onkeyup="uploadProduct1()"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-radio-group v-model="form.cate2">
            <el-radio label="crusher">建筑破碎</el-radio>
            <el-radio label="mill">磨粉设备</el-radio>
            <el-radio label="sand">制砂设备</el-radio>
            <el-radio label="mobile">移动设备</el-radio>
            <el-radio label="peitao">配套设备</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="加工物料" :label-width="formLabelWidth">
          <el-input  v-model="form.material2" auto-complete="off" @change="changeEvent"></el-input>
        </el-form-item>
        <el-form-item label="进料粒度" :label-width="formLabelWidth">
          <el-input  v-model="form.insize2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="配套设备名称" :label-width="formLabelWidth">
          <el-input  v-model="form.protitle2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产线详情" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.detail2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用范围" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.area2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户评价" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="form.evaluate2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" :label-width="formLabelWidth">
          <el-upload
            class="fl"
            :action="token1"
            list-type="picture-card"
            :on-success="listAdd2"
            name="img"
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="listRemove2"
            :file-list="imgList3">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="banner图片" :label-width="formLabelWidth">
          <el-upload
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="bannerRemove2"
            :on-success="bannerAdd2"
            name="img"
            :limit="1"
            :file-list="imgList2"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="内页案例图片" :label-width="formLabelWidth">
          <el-upload
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="articleRemove2"
            :on-success="articleAdd2"
            name="img"
            :limit="1"
            :file-list="imgList4"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadProduct()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加产品 -->
    <el-dialog title="添加案例" :visible.sync="dialogVisibleLondy">
      <el-form :model="form">
        <el-form-item label="案例名" :label-width="formLabelWidth">
          <el-input  v-model="form.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-radio-group v-model="form.cate">
            <el-radio label="crusher">建筑破碎</el-radio>
            <el-radio label="mill"   >磨粉设备</el-radio>
            <el-radio label="sand"   >制砂设备</el-radio>
            <el-radio label="mobile" >移动设备</el-radio>
            <el-radio label="peitao" >配套设备</el-radio>
          </el-radio-group>
        </el-form-item>
       <el-form-item label="加工物料" :label-width="formLabelWidth">
          <el-input  v-model="form.material" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="进料粒度" :label-width="formLabelWidth">
          <el-input  v-model="form.insize" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="配套设备名称" :label-width="formLabelWidth">
          <el-input  v-model="form.protitle" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="生产线详情" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.detail" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用范围" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.area" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户评价" :label-width="formLabelWidth">
          <el-input type="textarea" rows="3" v-model="form.evaluate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            class="fl"
            :action="token1"
            list-type="picture-card"
            :on-success="listAdd"
            name="img"
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="listRemove"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="banner图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="bannerRemove"
            :on-success="bannerAdd"
            name="img"
            :limit="1"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="内页案例图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="articleRemove"
            :on-success="articleAdd"
            name="img"
            :limit="1"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleLondy = false">取 消</el-button>
        <el-button type="primary" @click="addProduct()">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      :total="casePage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      response: '',
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      casePage: 1,
      pageSize: '',
      changePage: 1,
      dialogVisibleLondy: false,
      londy: [],
      loading: false,
      token1: '',
      form: {
        title2: '',
        cate2: '',
        material2: '',
        insize2: '',
        protitle2: '',
        detail2: '',
        area2: '',
        evaluate2: '',
        list_img2: '',
        article_img2: '',
        single_banner2: '',
        // case_img2: [],
        title: '',
        cate: '',
        material: '',
        insize: '',
        protitle: '',
        detail: '',
        area: '',
        evaluate: '',
        list_img: '',
        article_img: '',
        single_banner: ''
      },
      imgList2: [],
      imgList3: [],
      imgList4: [],
      currentIndex: '',
      create_time: '',
      formLabelWidth: '200px',
      caseList: [],
      BASE_API: process.env.BASE_API
    }
  },
  async mounted () {
    window.t = 0
    this.loading = true
    this.token1 = process.env.BASE_API + '/upload/?token=' + localStorage.getItem('token')
    let res = await axios.get('/case')
    if (res.data.errno === 0) {
      this.caseList = res.data.data.data
      for (let i = 0; i < this.caseList.length; i++) {
        let j = new Date(this.caseList[i].create_time * 1000)
        let y = j.getFullYear()
        let m = j.getMonth() + 1
        let d = j.getDate()
        this.caseList[i].create_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + '<br>' + j.toTimeString().substr(0, 8)
      }
      this.casePage = Number.parseInt(res.data.data.count)
      this.loading = false
    }
  },
  methods: {
    // 查看案例
    async openProInfo (index) {
      this.currentIndex = index
      let res = await axios.get('/case/' + this.caseList[index]._id)
      // console.log(res)
      this.dialogFormVisible = true
      this.form.title2 = res.data.data.title
      this.form.cate2 = res.data.data.cate
      this.form.material2 = res.data.data.material
      this.form.insize2 = res.data.data.insize
      this.form.protitle2 = res.data.data.protitle
      this.form.detail2 = res.data.data.detail
      this.form.area2 = res.data.data.area
      this.form.evaluate2 = res.data.data.evaluate
      this.form.list_img2 = res.data.data.list_img
      this.form.single_banner2 = res.data.data.single_banner
      this.form.article_img2 = res.data.data.article_img
      // this.form.case_id = res.data.data.case_id
      this.imgList2 = []
      if (this.form.single_banner2 !== '') {
        this.imgList2.push({ url: process.env.BASE_API + this.form.single_banner2 })
      }
      this.imgList3 = []
      if (this.form.list_img2 !== '') {
        this.imgList3.push({ url: process.env.BASE_API + this.form.list_img2 })
      }
      this.imgList4 = []
      if (this.form.article_img2 !== '') {
        this.imgList4.push({ url: process.env.BASE_API + this.form.article_img2 })
      }
    },
    // 修改案例
    async changeEvent () {
      if (Number.isInteger(this.currentIndex)) {
        console.log(this.currentIndex)
      }
      console.log(this.form.material2)
    },
    // 修改案例
    async uploadProduct () {
      if (Number.isInteger(this.currentIndex)) {
        console.log(this.currentIndex)
      }
      let data = {
        title: this.form.title2,
        cate: this.form.cate2,
        material: this.form.material2,
        insize: this.form.insize2,
        protitle: this.form.protitle2,
        detail: this.form.detail2,
        area: this.form.area2,
        evaluate: this.form.evaluate2
      }
      let res = await axios.put(
        '/case/' + this.caseList[this.currentIndex]._id,
        qs.stringify(data)
      )
      this.caseList[this.currentIndex].title = this.form.title2
      this.dialogFormVisible = false
      if (res.data.errno === 0) {
        Message.success({ message: '修改成功!' })
      }
    },
    // 增加案例
    async addProduct () {
      let data = {
        title: this.form.title,
        cate: this.form.cate,
        material: this.form.material,
        insize: this.form.insize,
        protitle: this.form.protitle,
        detail: this.form.detail,
        area: this.form.area,
        evaluate: this.form.evaluate,
        single_banner: this.form.single_banner,
        list_img: this.form.list_img,
        article_img: this.form.article_img
      }
      let res = await axios.post('/case/', qs.stringify(data))
      if (res.data.errno === 0) {
        this.caseList.unshift({
          title: this.form.title,
          _id: res.data.data
        })
        Message.success({ message: '添加成功!' })
        this.dialogVisibleLondy = false
        this.form.title = ''
        this.form.cate = ''
        this.form.material = ''
        this.form.insize = ''
        this.form.protitle = ''
        this.form.detail = ''
        this.form.area = ''
        this.form.evaluate = ''
        this.form.single_banner = ''
        this.form.article_img = ''
        this.form.list_img = ''
        // this.$refs.upload.clearFiles()
        // this.$refs.upload1.clearFiles()
        // this.$refs.upload2.clearFiles()
      }
    },
    // 删除案例
    async delProduct (index) {
      await this.$confirm('确认删除?', '提示', { type: 'warning' })
      let res = await axios.delete(
        '/case/' + this.caseList[index]._id
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.caseList.splice(index, 1)
      }
    },
    /** ************************************添加案例-删除操作**********************************/
    // 封面图 删除图片
    async listRemove (file, fileList) {
      let imgpath = file.response.data
      // console.log(imgpath)
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.list_img = ''
      } else {
        console.log(res.data)
      }
    },
    // banner 删除图片
    async bannerRemove (file, fileList) {
      let imgpath = file.response.data
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.single_banner = ''
      } else {
        console.log(res.data)
      }
    },
    // 内页案例 删除图片
    async articleRemove (file, fileList) {
      let imgpath = file.response.data
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.article_img = ''
      } else {
        console.log(res.data)
      }
    },
    /** *********************************修改案例-删除操作 *********************************/
    // (修改案例)封面图 删除图片
    async listRemove2 (file, fileList) {
      console.log(file)
      let imgpath = ''
      if (file.size === undefined) {
        console.log('这是已上传的')
        console.log(imgpath)
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
        console.log(imgpath)
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.list_img2 = ''
        await axios.put(
          '/case/' + this.caseList[this.currentIndex]._id,
          qs.stringify({ list_img: this.form.list_img2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // (修改案例)banner 删除图片
    async bannerRemove2 (file, fileList) {
      let imgpath = ''
      if (file.size === undefined) {
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.single_banner2 = ''
        await axios.put(
          '/case/' + this.caseList[this.currentIndex]._id,
          qs.stringify({ single_banner: this.form.single_banner2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // (修改案例) 删除内页案例图片
    async articleRemove2 (file, fileList) {
      console.log(file)
      let imgpath = ''
      if (file.size === undefined) {
        console.log('这是已上传的')
        console.log(imgpath)
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
        console.log(imgpath)
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.article_img2 = ''
        await axios.put(
          '/case/' + this.caseList[this.currentIndex]._id,
          qs.stringify({ article_img: this.form.article_img2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // 翻页
    async handleCurrentChange (val) {
      this.loading = true
      let res = await axios.get('/case?page=' + val)
      console.log(res)
      this.caseList = res.data.data.data
      this.loading = false
    },
    /** *********************************添加案例-添加操作 *********************************/
    // (添加案例) 封面图 添加图片
    listAdd (response) {
      this.form.list_img = response.data
    },
    // 添加多张时警告
    handleExceed (files, fileList) {
      this.$message.warning('封面图片只允许上传最多1张图片')
    },
    // (添加案例) banner 添加图片
    bannerAdd (response) {
      this.form.single_banner = response.data
    },
    // (添加案例) 内页案例 添加图片
    articleAdd (response) {
      this.form.article_img = response.data
    },
    /** *********************************修改案例-添加操作 *********************************/
    // (修改案例) 封面图 添加图片
    async listAdd2 (response) {
      this.form.list_img2 = response.data
      await axios.put(
        '/case/' + this.caseList[this.currentIndex]._id,
        qs.stringify({ list_img: this.form.list_img2 })
      )
    },
    // (修改案例) banner 添加图片
    async bannerAdd2 (response) {
      this.form.single_banner2 = response.data
      await axios.put(
        '/case/' + this.caseList[this.currentIndex]._id,
        qs.stringify({ single_banner: this.form.single_banner2 })
      )
    },
    // （修改案例）内页案例 添加图片
    async articleAdd2 (response) {
      this.form.article_img2 = response.data
      // let data = this.form.article_img2
      // data.push(response.data)
      await axios.put(
        '/case/' + this.caseList[this.currentIndex]._id,
        qs.stringify({ article_img: this.form.article_img2 })
      )
    }
  }
}
</script>
<style lang="sass">
.caseList .el-table th
  text-align: center
.caseList .fl
  text-align: left
.cell
  text-align: center
.el-button--primary
  margin-bottom: 22px !important
  background: #409EFF
.el-pagination
  margin-top: 40px
  margin-bottom: 60px
.caseName
  margin-top: 0
  padding-left: 0
  li
    width: 148px
    float: left
    margin-right: 8px
    list-style: none
.el-dialog
  width: 70%
</style>

<style lang="sass" scoped>
body
  margin: 0
.add
  float: left
.find
  width: 20%
  float: left
  margin-right: 15px
</style>
